<template>
  <div>
    <el-tabs :tab-position="label='left'" style="height: 100%;">
      <el-tab-pane label="我的订单">
        <el-tabs :tab-position="label='top'" :before-leave="handleOrder" style="height: 100%">
          <el-tab-pane label="全部">
            <div v-for="(item,index) in orderData" :key="item.id" style="margin-bottom: 7px">
              <el-row style="background-color: #91EAE4">
                <el-col :span="6">订单号：{{item.orderNum}}</el-col>
                <el-col :span="6">下单时间：{{dateFormat(item.createTime)}}</el-col>
              </el-row>
              <el-row>
                <el-col style="background-color: #FFFDE4">
                  <el-col :span="3">
                    <el-image
                      style="width: 150px; height: 150px"
                      :src="item.img"
                      fit="cover"></el-image>
                  </el-col>
                  <el-col :span="16">
                    <el-row>
                      <el-col :span="3">{{item.title}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="6">一口价：<span class="span">{{item.price}}</span></el-col>
                      <el-col :span="6">佣金：<span class="span">{{item.salary}}%</span></el-col>
                    </el-row>
                    <el-row>活动时间：<span class="span">{{dateFormat(item.start)}}-{{dateFormat(item.end)}}</span></el-row>
                    <el-row>邮寄信息：{{item.userName}} {{item.phone}} {{item.characteristic}}</el-row>
                    <el-row>
                      <el-col :span="2">发布号：</el-col>
                      <el-col :span="3" v-for="(item1,index) in forList(item.accountName)" :key="index">
                        {{item1}}
                      </el-col>
                    </el-row>
                    <el-row>订单备注：{{item.message}}</el-row>
                    <el-row> 推广方式：<span class="span">{{item.model}}</span></el-row>
                    <!--<el-row>申请自动取消时间还剩：</el-row>-->
                  </el-col>
                  <el-col :span="5">
                    <el-row style="margin-top: 5px">
                      <el-col align="center" v-if="item.status === '0'">待审核</el-col>
                      <el-col align="center" v-if="item.status === '1'">待发货</el-col>
                      <el-col align="center" v-if="item.status === '2'">待收货</el-col>
                      <el-col align="center" v-if="item.status === '3'">已完成</el-col>
                      <el-col align="center" v-if="item.status === '4'">已关闭</el-col>
                      <!--<el-col align="center" style="margin-top: 5px">-->
                      <!--<el-button type="primary" plain>取消申请</el-button>-->
                      <!--</el-col>-->
                    </el-row>
                  </el-col>
                </el-col>
              </el-row>
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="待审核">
            <div v-for="(item,index) in orderData" :key="item.id">
              <el-row style="background-color: #91EAE4">
                <el-col :span="6">订单号：{{item.orderNum}}</el-col>
                <el-col :span="6">下单时间：{{dateFormat(item.createTime)}}</el-col>
              </el-row>
              <el-row>
                <el-col style="background-color: #FFFDE4">
                  <el-col :span="3">
                    <el-image
                      style="width: 150px; height: 150px"
                      :src="item.img"
                      fit="cover"></el-image>
                  </el-col>
                  <el-col :span="16">
                    <el-row>
                      <el-col :span="3">{{item.title}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="6">一口价：<span class="span">{{item.price}}</span></el-col>
                      <el-col :span="6">佣金：<span class="span">{{item.salary}}%</span></el-col>
                    </el-row>
                    <el-row>活动时间：<span class="span">{{dateFormat(item.start)}}-{{dateFormat(item.end)}}</span></el-row>
                    <el-row>邮寄信息：{{item.userName}} {{item.phone}} {{item.characteristic}}</el-row>
                    <el-row>
                      <el-col :span="2">发布号：</el-col>
                      <el-col :span="3" v-for="(item1,index) in forList(item.accountName)" :key="index">
                        {{item1}}
                      </el-col>
                    </el-row>
                    <el-row>订单备注：{{item.message}}</el-row>
                    <el-row> 推广方式：<span class="span">{{item.model}}</span></el-row>
                    <!--<el-row>申请自动取消时间还剩：</el-row>-->
                  </el-col>
                  <el-col :span="5">
                    <el-row style="margin-top: 5px">
                      <el-col align="center" v-if="item.status === '0'">待审核</el-col>
                      <el-col align="center" v-if="item.status === '1'">待发货</el-col>
                      <el-col align="center" v-if="item.status === '2'">待收货</el-col>
                      <el-col align="center" v-if="item.status === '3'">已完成</el-col>
                      <el-col align="center" v-if="item.status === '4'">已关闭</el-col>
                      <!--<el-col align="center" style="margin-top: 5px">-->
                      <!--<el-button type="primary" plain>取消申请</el-button>-->
                      <!--</el-col>-->
                    </el-row>
                  </el-col>
                </el-col>
              </el-row>
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="代发货">
            <div v-for="(item,index) in orderData" :key="item.id">
              <el-row style="background-color: #91EAE4">
                <el-col :span="6">订单号：{{item.orderNum}}</el-col>
                <el-col :span="6">下单时间：{{dateFormat(item.createTime)}}</el-col>
              </el-row>
              <el-row>
                <el-col style="background-color: #FFFDE4">
                  <el-col :span="3">
                    <el-image
                      style="width: 150px; height: 150px"
                      :src="item.img"
                      fit="cover"></el-image>
                  </el-col>
                  <el-col :span="16">
                    <el-row>
                      <el-col :span="3">{{item.title}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="6">一口价：<span class="span">{{item.price}}</span></el-col>
                      <el-col :span="6">佣金：<span class="span">{{item.salary}}%</span></el-col>
                    </el-row>
                    <el-row>活动时间：<span class="span">{{dateFormat(item.start)}}-{{dateFormat(item.end)}}</span></el-row>
                    <el-row>邮寄信息：{{item.userName}} {{item.phone}} {{item.characteristic}}</el-row>
                    <el-row>
                      <el-col :span="2">发布号：</el-col>
                      <el-col :span="3" v-for="(item1,index) in forList(item.accountName)" :key="index">
                        {{item1}}
                      </el-col>
                    </el-row>
                    <el-row>订单备注：{{item.message}}</el-row>
                    <el-row> 推广方式：<span class="span">{{item.model}}</span></el-row>
                    <!--<el-row>申请自动取消时间还剩：</el-row>-->
                  </el-col>
                  <el-col :span="5">
                    <el-row style="margin-top: 5px">
                      <el-col align="center" v-if="item.status === '0'">待审核</el-col>
                      <el-col align="center" v-if="item.status === '1'">待发货</el-col>
                      <el-col align="center" v-if="item.status === '2'">待收货</el-col>
                      <el-col align="center" v-if="item.status === '3'">已完成</el-col>
                      <el-col align="center" v-if="item.status === '4'">已关闭</el-col>
                      <!--<el-col align="center" style="margin-top: 5px">-->
                      <!--<el-button type="primary" plain>取消申请</el-button>-->
                      <!--</el-col>-->
                    </el-row>
                  </el-col>
                </el-col>
              </el-row>
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="待收货">
            <div v-for="(item,index) in orderData" :key="item.id">
              <el-row style="background-color: #91EAE4">
                <el-col :span="6">订单号：{{item.orderNum}}</el-col>
                <el-col :span="6">下单时间：{{dateFormat(item.createTime)}}</el-col>
              </el-row>
              <el-row>
                <el-col style="background-color: #FFFDE4">
                  <el-col :span="3">
                    <el-image
                      style="width: 150px; height: 150px"
                      :src="item.img"
                      fit="cover"></el-image>
                  </el-col>
                  <el-col :span="16">
                    <el-row>
                      <el-col :span="3">{{item.title}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="6">一口价：<span class="span">{{item.price}}</span></el-col>
                      <el-col :span="6">佣金：<span class="span">{{item.salary}}%</span></el-col>
                    </el-row>
                    <el-row>活动时间：<span class="span">{{dateFormat(item.start)}}-{{dateFormat(item.end)}}</span></el-row>
                    <el-row>邮寄信息：{{item.userName}} {{item.phone}} {{item.characteristic}}</el-row>
                    <el-row>
                      <el-col :span="2">发布号：</el-col>
                      <el-col :span="3" v-for="(item1,index) in forList(item.accountName)" :key="index">
                        {{item1}}
                      </el-col>
                    </el-row>
                    <el-row>订单备注：{{item.message}}</el-row>
                    <el-row> 推广方式：<span class="span">{{item.model}}</span></el-row>
                    <!--<el-row>申请自动取消时间还剩：</el-row>-->
                  </el-col>
                  <el-col :span="5">
                    <el-row style="margin-top: 5px">
                      <el-col align="center" v-if="item.status === '0'">待审核</el-col>
                      <el-col align="center" v-if="item.status === '1'">待发货</el-col>
                      <el-col align="center" v-if="item.status === '2'">待收货</el-col>
                      <el-col align="center" v-if="item.status === '3'">已完成</el-col>
                      <el-col align="center" v-if="item.status === '4'">已关闭</el-col>
                      <!--<el-col align="center" style="margin-top: 5px">-->
                      <!--<el-button type="primary" plain>取消申请</el-button>-->
                      <!--</el-col>-->
                    </el-row>
                  </el-col>
                </el-col>
              </el-row>
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="已完成">
            <div v-for="(item,index) in orderData" :key="item.id">
              <el-row style="background-color: #91EAE4">
                <el-col :span="6">订单号：{{item.orderNum}}</el-col>
                <el-col :span="6">下单时间：{{dateFormat(item.createTime)}}</el-col>
              </el-row>
              <el-row>
                <el-col style="background-color: #FFFDE4">
                  <el-col :span="3">
                    <el-image
                      style="width: 150px; height: 150px"
                      :src="item.img"
                      fit="cover"></el-image>
                  </el-col>
                  <el-col :span="16">
                    <el-row>
                      <el-col :span="3">{{item.title}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="6">一口价：<span class="span">{{item.price}}</span></el-col>
                      <el-col :span="6">佣金：<span class="span">{{item.salary}}%</span></el-col>
                    </el-row>
                    <el-row>活动时间：<span class="span">{{dateFormat(item.start)}}-{{dateFormat(item.end)}}</span></el-row>
                    <el-row>邮寄信息：{{item.userName}} {{item.phone}} {{item.characteristic}}</el-row>
                    <el-row>
                      <el-col :span="2">发布号：</el-col>
                      <el-col :span="3" v-for="(item1,index) in forList(item.accountName)" :key="index">
                        {{item1}}
                      </el-col>
                    </el-row>
                    <el-row>订单备注：{{item.message}}</el-row>
                    <el-row> 推广方式：<span class="span">{{item.model}}</span></el-row>
                    <!--<el-row>申请自动取消时间还剩：</el-row>-->
                  </el-col>
                  <el-col :span="5">
                    <el-row style="margin-top: 5px">
                      <el-col align="center" v-if="item.status === '0'">待审核</el-col>
                      <el-col align="center" v-if="item.status === '1'">待发货</el-col>
                      <el-col align="center" v-if="item.status === '2'">待收货</el-col>
                      <el-col align="center" v-if="item.status === '3'">已完成</el-col>
                      <el-col align="center" v-if="item.status === '4'">已关闭</el-col>
                      <!--<el-col align="center" style="margin-top: 5px">-->
                      <!--<el-button type="primary" plain>取消申请</el-button>-->
                      <!--</el-col>-->
                    </el-row>
                  </el-col>
                </el-col>
              </el-row>
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="已关闭">
            <div v-for="(item,index) in orderData" :key="item.id">
              <el-row style="background-color: #91EAE4">
                <el-col :span="6">订单号：{{item.orderNum}}</el-col>
                <el-col :span="6">下单时间：{{dateFormat(item.createTime)}}</el-col>
              </el-row>
              <el-row>
                <el-col style="background-color: #FFFDE4">
                  <el-col :span="3">
                    <el-image
                      style="width: 150px; height: 150px"
                      :src="item.img"
                      fit="cover"></el-image>
                  </el-col>
                  <el-col :span="16">
                    <el-row>
                      <el-col :span="3">{{item.title}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="6">一口价：<span class="span">{{item.price}}</span></el-col>
                      <el-col :span="6">佣金：<span class="span">{{item.salary}}%</span></el-col>
                    </el-row>
                    <el-row>活动时间：<span class="span">{{dateFormat(item.start)}}-{{dateFormat(item.end)}}</span></el-row>
                    <el-row>邮寄信息：{{item.userName}} {{item.phone}} {{item.characteristic}}</el-row>
                    <el-row>
                      <el-col :span="2">发布号：</el-col>
                      <el-col :span="3" v-for="(item1,index) in forList(item.accountName)" :key="index">
                        {{item1}}
                      </el-col>
                    </el-row>
                    <el-row>订单备注：{{item.message}}</el-row>
                    <el-row> 推广方式：<span class="span">{{item.model}}</span></el-row>
                    <!--<el-row>申请自动取消时间还剩：</el-row>-->
                  </el-col>
                  <el-col :span="5">
                    <el-row style="margin-top: 5px">
                      <el-col align="center" v-if="item.status === '0'">待审核</el-col>
                      <el-col align="center" v-if="item.status === '1'">待发货</el-col>
                      <el-col align="center" v-if="item.status === '2'">待收货</el-col>
                      <el-col align="center" v-if="item.status === '3'">已完成</el-col>
                      <el-col align="center" v-if="item.status === '4'">已关闭</el-col>
                      <!--<el-col align="center" style="margin-top: 5px">-->
                      <!--<el-button type="primary" plain>取消申请</el-button>-->
                      <!--</el-col>-->
                    </el-row>
                  </el-col>
                </el-col>
              </el-row>
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="账号绑定">
        <div style="margin-top: 15px">
          <el-button size="medium" type="primary" icon="el-icon-plus" @click="bindAccount">绑定子账号</el-button>
          <span style="color: #999999"> * 支持绑定多个抖音号</span>
        </div>

        <el-row>
          <el-col :span="6" align="center" style="margin-top: 30px;margin-left:30px;width: 100px;"
                  v-for="(item, index) in douyinInfoList" :key="item.id">
            <el-row>
              <el-col align="center">
                <el-image
                  style="width: 100px; height: 100px;border-radius: 50%"
                  :src="item.avatar"
                  fit="cover"></el-image>
              </el-col>
            </el-row>
            <el-row>
              <el-col align="center">
                {{item.nickname}}
              </el-col>
            </el-row>
          </el-col>
        </el-row>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  import {getToken} from '@/utils/cookie'
  export default {
    components: {
      ElCol,
      ElRow
    },
    data() {
      return {
        currentPage: 0,
        total: 0,
        status: '',
        douyinInfoList: [],
        orderData: []
      }
    },
    created(){
      this.getdouyinInfoList();
      this.getAllOrder()
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleOrder(activeName, oldActiveName){
        if (activeName === '0') {
          this.status = ''
          this.getAllOrder()
        }
        if (activeName === '1') {
          this.status = '0'
          this.getAllOrder()
        }
        if (activeName === '2') {
          this.status = '1'
          this.getAllOrder()
        }
        if (activeName === '3') {
          this.status = '2'
          this.getAllOrder()
        }
        if (activeName === '4') {
          this.status = '3'
          this.getAllOrder()
        }
        if (activeName === '5') {
          this.status = '4'
          this.getAllOrder()
        }
      },
      getAllOrder(){
        let data = {
          status: this.status
        }
        this.$http.defaults.headers.common['Authorization'] = 'Bearer ' + getToken()
        this.$http.post(`/order/list/${this.currentPage}`, data).then((res) => {
          this.orderData = res.data.data.list
          this.total = res.data.data.total
          console.log(res)
        })
      },
      bindAccount(){
        this.$http.defaults.headers.common['Authorization'] = 'Bearer ' + getToken()
        this.$http.post('/base/douyin/code').then((res) => {
          window.location.href = res.data.data
        })
      },
      getdouyinInfoList(){
        this.$http.defaults.headers.common['Authorization'] = 'Bearer ' + getToken()
        this.$http.get('/base/douyin/bind/info/list').then((res) => {
          this.douyinInfoList = res.data.data
        })
      },
      dateFormat: function (time) {
        var date = new Date(time);
        var year = date.getFullYear();
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      },
      forList: function (list) {
        return JSON.parse(list)
      }
    }
  }
</script>

<style>
  .span {
    color: red
  }
</style>
